<template>
    <div>
        <h1>名单检查</h1>
        <el-form>
            <el-form-item label="班级">
                <el-select v-model="filter.myClass" placeholder="请选择" @change="changeForm">
                    <el-option
                            v-for="item in classOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="类型">
                <el-radio-group v-model="filter.type" @change="changeForm">
                    <el-radio label="self">本人</el-radio>
                    <el-radio label="mother">妈妈</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="姓名(每行一个)">
                <el-button type="primary" size="mini" @click="clearNames">清空姓名</el-button>
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2}"
                        placeholder="请输入内容"
                        v-model="filter.names" @change="changeForm">
                </el-input>
                <el-button type="primary" size="mini" @click="clearNames">清空姓名</el-button>
            </el-form-item>
            <el-form-item label="排除关键字(多个关键字用空格相隔)">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2}"
                        placeholder="请输入内容" @change="changeForm"
                        v-model="filter.excludeKeywords">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="checkName">检查</el-button>
            </el-form-item>
            <div v-if="showResult">
                <span v-if="intersectArray.length >= 5">
                    <el-form-item label="未提交名单:">
                         <span v-if="difference1">{{difference1.length}}个：</span>{{difference1}}
                    </el-form-item>
                    <el-form-item label="@数据:">
                        {{difference1At}}
                        <el-button class="tag-read"  type="primary" :data-clipboard-text="difference1At" @click="copy" >复制@数据</el-button>
                    </el-form-item>
                    <el-form-item label="异常数据:">
                        {{difference2}}
                    </el-form-item>
                </span>
                <span v-else>
                    匹配太少，不予展示
                </span>
            </div>
        </el-form>
    </div>
</template>

<script>
    import Clipboard from "clipboard";
    export default {
        data() {
            return {
                classOptions: [{
                    value: '504',
                    label: '504'
                }, {
                    value: '2017',
                    label: '2017'
                }],
                showResult: false,
                allNameMap: {
                  '504': ["蔡明杰", "陈孙睿", "陈梧铠", "方轶斟", "甘芷爱", "何晗悦", "黄崚轩", "黄美柯", "黄星景", "姜轶皓", "蒋夏妍", "金文宇", "来宇亮", "李舒萌", "李思齐", "李子涵", "林可沁", "刘希沐", "刘欣雅", "刘苡萱", "吕元泽", "史简", "帅言泊", "汤嘉浩", "陶彦羽", "王茜佩", "王宇轩", "吴桐", "肖李诺", "许多", "许晏", "叶熠欢", "叶哲昊", "叶哲昱", "叶紫瑄", "易芷杭", "俞辰熠", "虞佐橙", "张钧童", "张轩昊", "张宇泽", "赵来骏", "朱九皋", "郭笑妍", "苏佳萱"],
                  '2017': ["许峰", "许洁", "闫俊材", "闫伶俐", "杨汉卿", "杨辉", "杨慧", "杨佳雯", "杨健", "杨志华", "尧勇", "姚驰", "姚聪葱", "姚若宇", "叶波", "叶楚楚", "尹凯奇", "于富丞", "于淼", "余德泽", "余湖", "余旭峰", "俞杰", "俞锦东", "俞侃", "张国旗", "张嘉旎", "张剑涛", "张康凯", "张琳琰", "张平华", "张倩", "张卿", "张茹萱", "张舜", "张伟", "张向阳", "张啸野", "张鑫", "张洋", "张夷悦", "张益芦", "张莹", "张钰", "张振国", "张正子", "章聪聪", "章王晟", "章晓锋", "章煦", "赵爱民", "赵梦怡", "赵伟", "郑超", "郑梁", "郑沛航", "郑晟", "郑思圆", "郑新锦", "郑扬逸", "郑政杰", "钟建栋", "钟锦洋", "钟琼", "钟山", "周凯", "周牧天", "周伟", "周旭磊", "周张毅", "周正天", "周子炀", "朱纪陈", "朱佳佳", "朱凌枫", "朱依彤", "朱应保", "朱余胜", "朱源", "邹路琦"],
                },
                filter: {
                    type: 'mother',
                    myClass: '504',
                    names: null,
                    excludeKeywords: null,
                },
                difference1: null,
                difference1At: null,
                difference2: null,
                intersectArray: [],
            }
        },
        methods: {
            changeForm() {
              this.showResult = false
            },
            copy() {
                let clipboard = new Clipboard('.tag-read')

                clipboard.on('success', e => {
                    console.log('###e:', e);
                    this.$message({
                        showClose: true,
                        message: '复制成功！',
                        type: 'success'
                    })
                    // 释放内存
                    clipboard.destroy()
                })

                clipboard.on('error', e => {
                    console.error('###e:', e);
                    // 不支持复制
                    this.$message({
                        showClose: true,
                        message: '该浏览器不支持自动复制！',
                        type: 'success'
                    })
                    // 释放内存
                    clipboard.destroy()
                })
            },
            clearNames() {
              this.filter.names = ''
              this.checkName()
            },
            checkName() {
                this.showResult = true
                this.$localStorage.set('name_check0902.filterData', this.filter, 4 * 60 * 60 * 1000) // keep 1 day

                let names = this.filter.names || ''
                let nameArr = names.split('\n')
                nameArr = nameArr.filter(name => name && !name.startsWith('#'))
                nameArr = nameArr.map(name => name.replace(/\d+/g, ""))
                nameArr = nameArr.map(name => name.replace(".", ""))

                if (this.filter.excludeKeywords && this.filter.excludeKeywords.trim()) {
                    let excludeKeywords = this.filter.excludeKeywords.trim().split(" ")
                    excludeKeywords = excludeKeywords.filter(k => k)
                    for (let excludeKeyword of excludeKeywords) {
                        nameArr = nameArr.map(name => name.replace(excludeKeyword, ""))
                    }
                }

                nameArr = nameArr.map(name => name.trim())
                // console.log('nameArr:', nameArr)
                let allNameSet = new Set(this.allNameMap[this.filter.myClass])
                let existedNameSet = new Set(nameArr)
                let difference1Set = new Set([...allNameSet].filter(x => !existedNameSet.has(x)))
                let difference1 = [];
                difference1Set.forEach(v => difference1.push(v));
                this.difference1 = difference1.sort((a, b) => a.localeCompare(b))
                let suffix = this.filter.type == 'mother' ? '妈妈' : ''
                this.difference1At = this.difference1.map(d => "@" + d + suffix).join(' ')

                let difference2Set = new Set([...existedNameSet].filter(x => !allNameSet.has(x)))
                let difference2 = [];
                difference2Set.forEach(v => difference2.push(v));
                this.difference2 = difference2.sort((a, b) => a.localeCompare(b))

                let intersect = new Set([...allNameSet].filter(x => existedNameSet.has(x)));
                // console.log('intersect:', intersect)
                let intersectArray = []
                intersect.forEach(v => intersectArray.push(v));
                this.intersectArray = intersectArray

            },
        },
        mounted() {
            let cachedFilterData = this.$localStorage.get('name_check0902.filterData')
            if (cachedFilterData) {
                this.filter = cachedFilterData
            }
        }
    }
</script>

<style scoped>

</style>
